<template>
  <el-dialog
    title="订单详情"
    v-model="model"
    width="800px"
    :before-close="handleClose"
  >
    <div class="orderInfo">
      <el-descriptions label-class-name="labelStyle" border>
        <el-descriptions-item label="订单编号">
          {{ orderDetail.orderNo || "-" }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="下单时间">
          {{ orderDetail.createTime || "-" }}
        </el-descriptions-item>
        <el-descriptions-item :span="3" label="下单地址">
          {{ matchCommunity(orderDetail.communityId).name }}
          {{ orderDetail.roomNum || "-" }}
        </el-descriptions-item>

        <el-descriptions-item label="联系人">
          {{ orderDetail.realName || "-" }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label="联系电话">
          {{ orderDetail.phone || "-" }}
        </el-descriptions-item>
        <el-descriptions-item :span="3" label="详细情况">
          <div class="w-[400px] break-all">
            {{ orderDetail.content || "-" }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item :span="3" label="图片">
          <div class="flex flex-wrap">
            <div
              class="size-[100px] overflow-hidden ml-1"
              v-for="item in orderDetail.images.split(',')"
              :key="item"
            >
              <el-image :src="item" :width="100" :preview-src-list="[item]" />
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <div
        class="title font-bold mt-8 mb-4 text-[18px] pb-2 border-b-[1px] border-gray-300"
      >
        订单详情
      </div>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="12" v-if="orderDetail.status === 1">
            <el-form-item label="指派给" prop="repairUserId">
              <el-select v-model="form.repairUserId" placeholder="请选择">
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.nickName || item.realName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="[3, 4].includes(orderDetail.status)">
            <el-form-item label="收费类型" prop="feeType">
              <el-select v-model="form.feeType" placeholder="请选择">
                <el-option
                  v-for="item in feeTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            v-if="[3, 4].includes(orderDetail.status) && form.feeType !== 0"
          >
            <el-form-item label="收费金额" prop="amount">
              <el-input
                v-model="form.amount"
                type="number"
                placeholder="请输入"
              >
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                :rows="6"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { matchCommunity } from "@/common";
import { listUser } from "@/api/system/user";
import { sendRepairOrder, finishRepairOrder } from "@/api/operateManage";
import { feeTypeOptions } from "./config";
const props = defineProps({
  row: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(["submit"]);

const model = defineModel({
  default: false,
});

const orderDetail = props.row;

const formRef = ref();
const form = ref({
  id: "",
  repairUserId: "",
  feeType: "",
  amount: "",
  remark: "",
});
const rules = ref({
  repairUserId: [{ required: true, message: "请选择指派给", trigger: "blur" }],
  feeType: [{ required: true, message: "请选择收费类型", trigger: "blur" }],
  amount: [{ required: true, message: "请输入收费金额", trigger: "blur" }],
  remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
});

const userList = ref([]);
const getUserList = () => {
  listUser({
    pageNum: 1,
    pageSize: 10,
    communityId: orderDetail.communityId,
  }).then((res) => {
    userList.value = res.rows;
  });
};
onMounted(() => {
  form.value.id = orderDetail.id;
  getUserList();
});

const handleClose = () => {
  model.value = false;
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (orderDetail.status === 1) {
        sendRepairOrder(form.value).then(({ data }) => {
          if (data) {
            ElMessage.success("指派成功");
            handleClose();
            emit("submit");
          }
        });
      } else if ([3, 4].includes(orderDetail.status)) {
        finishRepairOrder(form.value).then(({ data }) => {
          if (data) {
            ElMessage.success("操作成功");
            handleClose();
            emit("submit");
          }
        });
      }
    }
  });
};
</script>

<style scoped>
.labelStyle {
  width: 200px;
  word-break: break-all;
}
.contentStyle {
  text-align: center;
  width: 400px;
  word-break: break-all;
}
</style>
